<template>
  <div class="initial-screening-efficiency">
    <el-card class="chart-card">
      <template #header>
        <div class="card-header">
          <span>初筛结果与效率</span>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="24">
          <div class="chart-container">
            <v-chart class="chart" :option="histOption" autoresize />
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 16px;">
        <el-col :span="24">
          <div class="chart-container box">
            <v-chart class="chart" :option="boxOption" autoresize />
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, watch } from 'vue'
import { useAnrStore } from '../stores/anr'
import { storeToRefs } from 'pinia'
import { getInitialScreeningEfficiency } from '../api/anr'

const anrStore = useAnrStore()
const { timeRange, customDateRange, selectedModels } = storeToRefs(anrStore)

const histOption = computed(() => {
  const h = state.value.histogram || { xAxis: [], series: [] }
  const series = (h.series || []).map(s => ({ ...s, barWidth: '60%' }))
  return {
    tooltip: { trigger: 'axis' },
    grid: { left: '3%', right: '4%', bottom: '6%', containLabel: true },
    xAxis: { type: 'category', name: '天数', data: (h.xAxis || []).map(String) },
    yAxis: { type: 'value', name: '数量' },
    series
  }
})

const boxOption = computed(() => {
  const b = state.value.boxplot || { xAxis: [], series: [] }
  return {
    tooltip: { trigger: 'item' },
    xAxis: { type: 'category', data: b.xAxis || [] },
    yAxis: { type: 'value', name: '时长(天)' },
    series: b.series || []
  }
})

const state = ref({ histogram: { xAxis: [], series: [] }, boxplot: { xAxis: [], series: [] } })

const loadData = async () => {
  const res = await getInitialScreeningEfficiency({
    timeRange: timeRange.value,
    customDateRange: customDateRange.value,
    models: selectedModels.value
  })
  state.value = {
    histogram: (res && res.histogram) || { xAxis: [], series: [] },
    boxplot: (res && res.boxplot) || { xAxis: [], series: [] }
  }
}

onMounted(() => { loadData() })
watch([timeRange, customDateRange, selectedModels], () => { loadData() }, { deep: true })
</script>

<style scoped>
.chart-card { padding-bottom: 12px; }
.card-header { display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.chart-container { height: 280px; width: 100%; }
.chart-container.box { height: 320px; }
.chart { height: 100%; width: 100%; }
</style>